<template>
  <div class="student">
    <el-card>
      <div class="search">
        <el-form :inline="true">
          <el-form-item label="题目ID:">
            <el-input v-model="params.id" clearable />
          </el-form-item>
          <el-form-item label="题目内容：">
            <el-input v-model="name" clearable />
          </el-form-item>
          <el-form-item label="年级：" style="width: 300px" prop="userLevel">
            <el-select v-model="params.level" placeholder="年级">
              <el-option v-for="item in data1" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="年级：" style="width: 300px" prop="userLevel">
            <el-select v-model="params.level" placeholder="请选择">
            </el-select>
          </el-form-item>
          <el-form-item label="题型：" style="width: 300px" prop="userLevel">
            <el-select v-model="params.level" placeholder="请选择">
            </el-select>
          </el-form-item>
          <el-form-item >
            <el-button  type="primary">查询</el-button>
          </el-form-item>
          <el-popover :visible="visible" placement="bottom" :width="470" >
            <div style="text-align: left; margin: "> 
              <el-button @click="add('danxuan')" type="warning">单选题</el-button>
              <el-button @click="add('duouxuan')" type="warning">多选题</el-button>
              <el-button @click="add('panduan')" type="warning">判断题</el-button>
              <el-button @click="add('GapFilling')" type="warning">填空题</el-button>
              <el-button @click="add('Fillinblank')" type="warning">简答题</el-button>
            </div>
            <template #reference >
              <el-button @click="visible = !visible" type="primary"style="margin:0 20px 18px -20px;" >添加</el-button>
            </template>
          </el-popover>
        
        </el-form>
      </div>
      <!-- 列表 -->
      <!-- 列表 -->
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="id" label="id" />
        <el-table-column prop="subjectId" label="学科" :formatter="formatsubject" width="130" />
        <el-table-column prop="questionType" label="题型" :formatter="formatType" />
        <el-table-column prop="shortTitle" label="题干" width="500" />
        <el-table-column prop="score" label="分数" width="80">
        </el-table-column>
        <el-table-column prop="difficult" label="难度" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="350">
          <template #default="scope">
            <el-button>预览</el-button>
            <el-button>编辑</el-button>
            <el-button type="danger" @click="delete1(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px;">
        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[7, 8, 9, 10]"
          layout="total, sizes, prev, pager, next, jumper" :total="30" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import QuestionApi, { type queryParams, type questionType, type subjectType } from "@/api/exam/query.api"
import { ref } from "vue"
let name = ref("")
import { useRouter } from "vue-router"
const tableData = ref<questionType[]>([])
const tableData1 = ref<subjectType[]>([])
const data = ref<any[]>([])
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  params.value.pageSize = val
  getLIst()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  params.value.pageIndex = val
  getLIst()
}
let visible = ref(false)
interface arrType {
  value: number
  name: string
}
let data1 = ref<arrType[]>([
  { value: 1, name: '一年级' },
  { value: 2, name: '二年级' },
  { value: 3, name: '三年级' },
  { value: 4, name: '四年级' },
  { value: 5, name: '五年级' },
  { value: 6, name: '六年级' },
  { value: 7, name: '初一' },
  { value: 8, name: '初二' },
  { value: 9, name: '初三' },
  { value: 10, name: '高一' },
  { value: 11, name: '高二' },
  { value: 12, name: '高三' },
])
// 接口参数
let params = ref<queryParams>({
  id: null,
  questionType: null,
  level: null,
  subjectId: null,
  pageIndex: 1,
  pageSize: 10
})
// 获取列表
 function getLIst() {
   QuestionApi.getQuestionPage(params.value).then(data => {
    tableData.value = data.list
  })
   QuestionApi.getsubject().then(data => {
    tableData1.value = data

  })
}
onMounted(async () => {
  await getLIst()
})
const formatsubject = (row: any) => {
  const foundItem = tableData1.value.find(item => item.id === row.subjectId);
  return foundItem ? `${foundItem.name}(${foundItem.levelName})` : '';
}
const formatType = (row: any) => {
  switch (row.questionType) {
    case 1:
      return '单选题';
    case 2:
      return '多选题';
    case 3:
      return '判断题';
    case 4:
      return '填空题';
    case 5:
      return '解答题';
    default:
      return "其它";
  }
}
const router = useRouter()
function delete1(id: number) {

}
function add(flag:string) {
  if(flag=="danxuan"){
  router.push("/exam/question/questionadd")
  }else if(flag=="duouxuan"){
  router.push("/exam/question/multipleChoice")
  }else if(flag=="panduan"){
    router.push("/exam/question/Judgment")
  }else if(flag=="GapFilling"){
    router.push("/exam/question/GapFilling")
  }else if(flag=="Fillinblank"){
    router.push("/exam/question/Fillinblank")
  }
  
}


</script>
<style scoped lang="scss">
.student {
  padding: 16px;
}
</style>